{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>{% block title %}base{% endblock %}</title>

    <!-- Bootstrap -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<div style="text-align: center;">
    <h2>书籍信息</h2>
    <table class="table" style="border: 1px">
        <tr>
            <th style="text-align: center;">ID号</th>
            <th style="text-align: center;">标题</th>
            <th style="text-align: center;">作者</th>
            <th style="text-align: center;">出版社</th>
            <th style="text-align: center;">出版年</th>
            <th style="text-align: center;">单价</th>
            <th style="text-align: center;">评分</th>
            <th style="text-align: center;">详情链接</th>
        </tr>
        {% for books in BooksList %}
            <tr>
                <td style="text-align: center;vertical-align: middle;">{{ books.id }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.title }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.author }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.press }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.imprint }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.price }}</td>
                <td style="text-align: center;vertical-align: middle;">{{ books.score }}</td>
                <td style="text-align: center;vertical-align: middle;">
                    <a href="https://book.douban.com/subject/{{ books.id }}/" class="btn" title="详情链接">详情链接</a>
                </td>
            </tr>
        {% endfor %}
    </table>

    <!-- 分页开始 -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if BooksList.number >= PageStep %}
                <li>
                    <a href="?page=1" aria-label="首页">
                        <span aria-label="true">首页</span>
                    </a>
                    <span>.....</span>
                </li>
            {% else %}
                <li>
                    <span aria-label="true">首页</span>
                </li>
            {% endif %}

            {% if BooksList.has_previous %}
                <li><a href="?page={{ BooksList.previous_page_number }}" aria-label="前页">
                    <span aria-hidden="true">前页</span></a></li>
            {% else %}
                <li><span aria-hidden="true">前页</span></li>
            {% endif %}

            {% if BooksList.paginator.num_pages %}
                {% for page in PageRange %}
                    {% if BooksList.number == page %}
                        <li class="active"><a href="?page={{ page }}">{{ page }}</a></li>
                    {% else %}
                        <li><a href="?page={{ page }}">{{ page }}</a></li>
                    {% endif %}
                {% endfor %}
            {% endif %}

            {% if BooksList.has_next %}
                <li><a href="?page={{ BooksList.next_page_number }}" aria-label="后页">
                    <span aria-label="true">后页</span></a></li>
            {% else %}
                <li><span aria-label="true">后页</span></li>
            {% endif %}

            {% if BooksList.paginator.num_pages >= PageStep %}
                {% if DifferencePage > PageStep %}
                    <li>
                        <span>...</span>
                        <a href="?page={{ BooksList.paginator.num_pages }}" aria-label="尾页">
                            <span aria-label="true">尾页</span>
                        </a>
                    </li>
                {% else %}
                    <li>
                        <span aria-label="true">尾页</span>
                    </li>
                {% endif %}
            {% endif %}
        </ul>
    </nav>
    <!-- 分页结束 -->

</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
